<template>
	<div class="lefts">
		<ul v-for="(item, index) in arr" :key="index">
			<li @click="fun(index, item)">{{item}}</li>
		</ul>
			<!-- <div class="nav">
				<img :src="v" alt="" v-for="(v, index) in arrNav" :key="index">
			</div> -->
	</div>
</template>

<script>
import rig from "./rig.vue";
import rights from "./rights.vue";
import service from "../../utils/service";
export default {
	components: {
		rights,
		rig
	},
	data() { 
		return {
			arr: [
			
			],
			arrNav: ['https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png', 'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png', 'https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png', 'https://img12.360buyimg.com/img/s130x100_jfs/t1/203343/14/10880/3097/61641568E184a8e0b/4522f6ec5bb9b10b.png'],
			index:0,
		}
	},
	mounted() {
		this.$http({
			url: "http://118.178.238.19:3001/api/pro/categorylist",
			method: "get",
			// pramas: { count: 2, limitNum: 20, }
			// limitNum  每页显示个数,默认值为10
		}).then(res => {
			this.arr = res.data.data
			// console.log(res.data.data)
			console.log(this.arr);
		})
	},
	methods: {
		
		fun(index,item) { 
			this.index = index
			this.$emit("hello", this.index)
			this.$bus.$emit("hello", item);
			console.log(this.index);
		},
	}
}
</script>

<style  scoped>
/* lang="scss" */
.lefts{
	box-sizing: border-box;
	float: left;
}
li{
	width: .85rem;
	height: .46rem;
line-height: .46rem;
text-align: center;
font-size: 14px;

}
/* // &:hover{
// 	color: red;
// } */
 li:hover {
 	color: red;
 }

 ul {
 	width: .85rem;
 	background-color: rgba(241, 237, 237, 0.348);

 }

 ul:hover {
 	background-color: white;
 }
		/* // &:hover {
		// 	background-color: white;
		// 	} */
				.nav {
					width: 100%;
					height: .5rem;
					position: fixed;
					bottom: 0;
					left: 0;
					z-index: 999;
					display: flex;
					align-items: center;
					justify-content: space-around;
					box-shadow: 0 -3px 15px #aaa;
					background: #fff;
				}
		
				.nav img {
					width: .7rem;
				}
</style>